<template>
	<view class="helang-tab-bar">
		<view class="placeholder" v-if="fixedBottom"></view>
		<view class="bar" :class="{'fixed': fixedBottom}">
			<view>
				<view style="position: absolute; width: 100%; top: -75rpx;">
					<image src="../../../../static/img/BG-white-1.png" style="width: 100%; height: 220rpx;"
						mode="aspectFill" v-if="current !== 10"></image>
					<image src="../../../../static/img/BG-gen.png" style="width: 100%; height: 220rpx;"
						mode="aspectFill" v-else></image>
				</view>
				<view style="position: absolute; width: 100%; top: -50rpx;">
					<view
						style="width: 100%; display: flex; justify-content: space-between; padding: 20rpx; align-items: center;">
						<view v-for="(item, index) in tabList" :key="index" :style="{   
                            display: 'flex',   
                            flexDirection: 'column',  
                            padding: '20rpx',  
                            alignItems: 'center',   
                            marginLeft: index === 1 ? '-100rpx' : '0',  
                            marginRight: index === 2 ? '-100rpx' : '0'   
                        }" @tap="change(index)">
							<u-icon :custom-prefix="item.icon" size="30"
								:color="current === index ? 'rgba(75,163, 103, 0.9)' : '#b4b3b8'">
							</u-icon>
							<view style="font-weight: 800; text-align: center;"
								:style="{ color: current === index ? 'rgba(75,163, 103, 0.9)' : '#b4b3b8' }">
								{{ item.text }}
							</view>
						</view>
					</view>
				</view>
				<view style="position: absolute; top: -110rpx; right: 295rpx;" @click="handleClick">
					<image src="../../../../static/img/Btn.png" style="height: 160rpx; width: 160rpx;"
						v-if="current !== 10" :class="{ bounce: isBouncing }"></image>
					<image src="../../../../static/img/Btn_active.png" style="height: 160rpx; width: 160rpx;" v-else
						:class="{ bounce: isBouncing }"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uniIcons from "@/uni_modules/helang-tabBar/components/uni-icons/uni-icons";

	export default {
		name: "helangTabBarOverturn",
		components: {
			uniIcons
		},
		props: {
			fixedBottom: {
				type: Boolean,
				default: true
			},
			currents:{
				type:Number,
				default:0
			}
		},
		data() {
			return {
				current: this.currents,
				tabList: [{
						"icon": "icon-home-3 iconfont",
						"text": "首页"
					},
					{
						"icon": "icon-shopping-bag-3 iconfont",
						"text": "农资商城"
					},
					{
						"icon": "icon-profile iconfont",
						"text": "农业资讯"
					},
					{
						"icon": "icon-user iconfont",
						"text": "我的"
					},
				],
				isBouncing: false // 控制动画的状态  
			};
		},
		mounted() {
			console.log(this.currents)
		},
		methods: {
			handleClick() {
				this.isBouncing = true; // 设置为 true 以触发动画  
				this.change(10); // 调用你的原有方法  

				// 添加震动效果  
				uni.vibrateShort(); // 短震动，持续时间约 200 毫秒  

				// 动画结束后重置状态  
				setTimeout(() => {
					this.isBouncing = false; // 重置动画状态  
				}, 500); // 和动画持续时间一致  
			},
			change(index) {
				if (this.current == index) {
					return;
				}
				this.current = index;

				// 根据 tab 索引跳转到不同的页面  
				switch (index) {
					case 0:
						uni.redirectTo({
							url: '/pages/index/index' // 跳转到首页  
						});
						break;
					case 1:
						uni.redirectTo({
							url: '/pages/shop/shop' // 跳转到农资商城  
						});
						break;
					case 2:
						uni.redirectTo({
							url: '/pages/news/news' // 跳转到农业资讯  
						});
						break;
					case 3:
						uni.redirectTo({
							url: '/pages/profile/profile' // 跳转到我的页面  
						});
						break;
					default:
						uni.redirectTo({
							url: '/pages/look_for_work/look_for_work' // 跳转到我的页面  
						});
						break;
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "./helang-flex.scss";
	@import "./tab-bar.scss";

	@keyframes bounce {

		0%,
		20%,
		50%,
		80%,
		100% {
			transform: translateY(0);
		}

		40% {
			transform: translateY(-10px);
			/* 向上移动 10px */
		}

		60% {
			transform: translateY(-5px);
			/* 向上移动 5px */
		}
	}

	.bounce {
		animation: bounce 0.5s;
		/* 动画持续时间为 0.5 秒 */
	}

	.helang-tab-bar {
		.wrap {
			padding: 12px;
		}

		.demo-layout {
			height: 25px;
			border-radius: 4px;
		}
	}
</style>